<template>
  <div class="tabs-container">
    <div v-for="(item, index) in list" :key="index" :class="{ active: item.key == active, tabs_item: true }" :style="{ width: 100 / column + '%', minWidth: minWidth + 'px' }" @click="tabs_click(item)">
      <div class="tabs_item_text">
        <p class="tabs_item_name">{{ item.name }}</p>
        <p class="tabs_item_count">{{ item.count }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Tabs',
  data() {
    return {
      update: true
    }
  },
  props: {
    list: {
      type: Array,
      required: true
    },
    column: {
      type: Number,
      required: true
    },
    minWidth: {
      type: Number,
      default: function () {
        return 200
      }
    },
    active: {
      type: [String, Number],
      required: true
    }
  },
  created() {
    this.default_active = this.active
  },
  methods: {
    tabs_click(item) {
      this.$emit('tabs_click', item.key)
    }
  }
}
</script>
<style scoped lang="scss">
.tabs-container {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  //justify-content: flex-start;
  vertical-align: middle;
  .tabs_item {
    display: inline-block;
    text-align: center;
    border: 1px solid #dcdfe6;
    margin-right: 12px;
    border-radius: 4px;
    box-shadow: 0px 0px 10px #eee;
    color: #333333;
    padding: 6px;
    margin-bottom: 12px;
    .tabs_item_text {
      display: flex;
      vertical-align: middle;
      display: inline-block;
      text-align: center;
      .tabs_item_name {
        font-size: 16px;
        font-weight: 700;
        margin: 8px 0 6px 0;
        font-family: Arial-Black;
      }
      .tabs_item_number {
        margin: 6px 0 8px 0;
        font-weight: 700;
        font-size: 14px;
        font-family: Arial-Black;
      }
      .tabs_item_count {
        margin: 6px 0 8px 0;
        font-size: 18px;
        font-family: Arial-Black;
      }
    }
  }
  .tabs_item:hover {
    cursor: pointer;
    color: #fff;
    box-shadow: 0px 0px 10px #ccc;
    background-image: linear-gradient(270deg, #8dabf5 0%, #5473e8 100%);
  }
  .tabs_item:last-child {
    margin-right: 0px;
  }
  .active {
    border: 1px solid #dddddd;
    background-image: linear-gradient(270deg, #8dabf5 0%, #5473e8 100%);
    .tabs_item_name {
      color: #fff;
    }
    .tabs_item_count {
      color: #fff;
    }
    .tabs_item_number {
      color: #fff;
    }
  }
}
</style>

